<template>
  <div class="login">
    <el-card class="box-card" @keyup.enter.native="login">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">
          <el-popover
            ref="loginHistory"
            placement="top"
            width="260"
            trigger="hover"
            :content="history.log">
          </el-popover>
          管理系统登录
          <el-button type="text" icon="information" v-popover:loginHistory></el-button>
        </span>
      </div>
      <el-form :rules="rules" ref="user" :model="user" label-position="top" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="user.username" @blur="getLastLoginInfo"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item label="登录备案">
          <el-input v-model="user.desc" placeholder="本次登录将被记录"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="login" type="success" v-loading="loading" style="width: 100%">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>


<script>
  import { mapActions } from 'vuex'
  import { httpPost, httpGet } from '../util/api'

  export default {
    name: 'login',
    data() {
      return {
        loading: false,
        history: {
          log: '请输入用户名获取最近登录信息！',
        },
        user: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名'},
          ],
          password: [
            {required: true, message: '请输入密码'}
          ]
        }
      }
    },
    methods: {
      ...mapActions(['USER_LOGIN']),
      login() {
        this.$refs['user'].validate((valid) => {
          if (!valid) {
            return
          } else {
            const user = {
              username: this.user.username,
              password: this.solt(this.user.password.trim()),
              desc: this.user.desc
            }
            this.loading = true
            httpPost('/login', user).then((response) => {
              const data = response.data
              if(data.code !== 200) {
                this.user.password = ''
              } else {
                // save to session & back to index
                this.USER_LOGIN({ user: data.result})
                const next = this.$route.query.redirect || '/'
                this.$router.push({ path: next })
              }
            })
            this.loading = false
          }
        })
      },
      getLastLoginInfo() {
        if (this.user.username) {
          // 获取最近登录信息
          httpGet(`/login_log?username=${this.user.username}`).then((response) => {
            const data = response.data
            this.history.log = data.msg || '暂无登录信息！'
          })
        }
      },
    }
  }
</script>


<style lang="scss">
  @import '../scss/theme';
  .login {
    background: radial-gradient(circle closest-side,#c9c9c9,#eee);
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-card {
      position: fixed;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      background-color: $background;
      width: 400px;
      height: 400px;
      .el-card__header {
        padding: 4px 20px;
      }
    }
  }

</style>
